<template>



门店名称：<input type="text" placeholder="请输入门店名称" v-model="name">

门店状态:<select v-model="state">
            <option value="">请选择</option>
            <option :value="true">营业中</option>
            <option :value="false">休息中</option>
        
</select>


<button  @click="PiLiang">批量删除</button>
<input type="button" value="查询" class="btn btn-success" @click="Show">

<table  class="table table-bordered">
            <thead>

           <tr>
                    
            <th>
                            <input type="checkbox" v-model="QuanXuan" @change="Quanxuan1">
             </th>
                    <th>门店编号</th>
                    <th>门店名称</th>
                    <th>门店分店名称</th>
                    <th>门店地址</th>
                    <th>门店电话</th>
                    <th>门店状态</th>
                    <th>门店介绍</th>
                    <th>入住须知</th>
                    <th>日期</th>
                    <th>逻辑删除</th>
                  
                    <th>交通信息</th>
                    <th>图片</th>
                    <th>操作</th>
           </tr>

            </thead>

            <tbody v-for="item in aa">

                            
           <tr>
                        <th>
                            <input type="checkbox" :checked="Xuanze" :value="item.Shop_Id" v-model="arrids" @change="FanXuan">
                        </th>
                 
                    <th>{{ item.Shop_Id }}</th>
                    <th>{{ item.Shop_Name }}</th>
                    <th>{{ item.Shop_BranchName }}</th>
                    <th>{{ item.Shop_Address }}</th>
                    <th>{{ item.Shop_Phone }}</th>
                    <th>{{ item.Shop_State}}</th>
                    <th>{{ item.Shop_Info }}</th>
                    <th>{{ item.Shop_Notice }}</th>

                    <th>{{ moment(item.Shop_Date).subtract(10, 'days').calendar() }}</th>
                    <th>{{ item.IsDel }}</th>
                    <th>{{ item.Shop_Traffic }}</th>
                    <th>
                       <img :src="item.Shop_Img " style="width: 88px; height: 88px;">

                    </th>
     
               
              
                    <th><button @click="Xg(item.Shop_Id)">修改</button></th>
           </tr>





            </tbody>




</table>



数据共<span style="color:red ">{{pageInfo.Count }}</span>条
每页显示<span  style="color:red ">{{pageInfo.m }}</span> 条
当前<span  style="color:red ">{{pageInfo.s }}</span>页
<button  @click="FenYe('E')">首页</button>
<button  @click="FenYe('S')">上一页</button>
<button  @click="FenYe('M')">下一页</button>

<button  @click="FenYe('F')">尾页</button>


<select v-model="pageInfo.m" @change="Show" >
    <option :value="3">3条/页</option>
    <option :value="5">5条/页</option>
    <option :value="7">7条/页</option>
</select>


跳转：<input  type="text"  v-model="TiaoZhuangS">

        <button class="btn btn-success" @click="TiaoZhuan(TiaoZhuangS)">跳转</button>
</template>



<script setup lang="ts">

    const Xuanze=ref(false);
    const QuanXuan=ref(false)

        const  arrids=ref([]);

    const Quanxuan1=()=>{

       
            if(QuanXuan.value==true)
            {
                
                Xuanze.value=true;

                arrids.value=aa.value.map((item:any)=>{

                    return item.Shop_Id
                })
          
            }
            else
            {
                Xuanze.value=false;
                arrids.value=[];
            }

        

    }




const FanXuan=()=>{
   
    //判断数据总长度和保存编号的新数组长度是否一致
    if(aa.value.length==arrids.value.length)
{
    
    QuanXuan.value=true
}
else
{
    QuanXuan.value=false
}




}


const TiaoZhuangS=ref(0);


const TiaoZhuan=(id: number)=>{


        if(isNaN(id))
        {
            alert('必须位数字')
            TiaoZhuangS.value=0;
            return ;
        }
    if(id<1||id>pageInfo.value.Zy)
{
        alert('请选择正确页码')
        TiaoZhuangS.value=0;
        return;
}


    pageInfo.value.s=id,

        

    Show();

}



 import axios from 'axios';
import {onMounted, ref} from 'vue';

import moment from 'moment';
import { useRouter,createRouter } from 'vue-router';
 const aa :any= ref([{
     Shop_Id:0 ,
      Shop_Name: "",
      Shop_BranchName: "",
      Shop_Address: "",
      Shop_Phone: "",
      Shop_State: true,
      Shop_Info: "",
      Shop_Notice: "",
      Shop_Traffic: "",
      Shop_Img: "",
      IsDel: true,
    "Shop_Date": ""

 }])





 onMounted(()=>{
    Show();

 })


const pageInfo= ref({
    s:1,
    m:3,
    Zy:0,
    Count:0,


})
 const name=ref('')
 const state=ref('')
const Show=()=>{
    axios.get('https://localhost:7035/api/Shop/ShowShop',{params:{

         s:pageInfo.value.s,
         m:pageInfo.value.m,
        Sname:name.value,
        ShopState:state.value

    }}).then(res=>{

        aa.value=res.data.PageData
        pageInfo.value.Zy=res.data.PageCount
        pageInfo.value.Count=res.data.TotalCount
    })
}



const FenYe=(chooes:string  )=>{
  
    switch(chooes)
    {
        case 'E':
                pageInfo.value.s=1
                break;
        case 'F':
                    

            pageInfo.value.s=pageInfo.value.Zy
            break;

        case 'S':

            if(  pageInfo.value.s>1)
                {
                        pageInfo.value.s--
                    }
                    else
                    {
                        alert('请选择正确页码')
                    }
       
                    break;
        case 'M':

        if(  pageInfo.value.s<pageInfo.value.Zy)
                    {
                        pageInfo.value.s++
                    }
                    else
                    {
                        alert('请选择正确页码')
                    }

            break;


    }
    

        Show();

}


const router=useRouter()

const Xg=(id:number)=>{



    router.push({
            
            name:'XgShop',
            
            params:{
                    id:id,


        }})

}


const PiLiang=()=>{
    if(!confirm('确认删除吗'))
{
        return ;
}
    if(arrids.value.length<=0)
{
    alert('请至少选择一条删除的数据')
    return ;
}



        axios.delete('https://localhost:7035/api/Shop/IsDelPiLiang',{params:{

            id:arrids.value.toString()

        }}).then(res=>{

                if(res.data>0)
                {
                    alert('删除成功')
                }
                else
                {
                    alert('删除失败')
                }

        })



}


</script>
